<template>
    <div id="details">
        <div class="video" v-if="video != undefined">
            <span v-if="video == ''">视频录制中...</span>
            <video v-else :src="video" controls="controls" width="100%">
                您的浏览器不支持 video 标签。
            </video>
        </div>
         <div class="main" v-for="(item,index) in contentList" :key="index">
             <div class="title" v-if="item.title">{{item.title}}：</div>
             <div class="content" v-html="item.content"></div>
         </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      video: '',
      contentList: []
    };
  },
  created () {
    this.video = this.$route.params.details.video;
    this.contentList = this.$route.params.details.list;
    document.title = this.$route.params.title;
  }
};
</script>

<style lang="scss">
#details{
    font-family: PingFangSC-regular;
    font-size: 14px;
    width: 100%;
    height: 100%;
    background: #FFFFFF !important;
    overflow-y: auto;
    padding: 0 0 30px;
    i,span,em{
        font-style: normal;
    }
    .video{
        width: 346px;
        height: 217px;
        background-color: #f2f2f2;
        border-radius: 6px;
        margin:21px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            font-size: 14px;
            color: #979797;
        }
    }
    .main{
        margin: 0 auto;
        width: 346px;
        overflow: hidden;
        img{
            width: 100%
        }
        .title{
            height: 20px;
            line-height:20px;
            color: rgba(70, 70, 70, 1);
            font-size: 14px;
            margin: 20px 0 0;
            font-weight: 600
        }
        .content{
           margin-top:5px;
           color: rgba(106, 106, 106, 1);
           font-size: 12px;
           line-height:22px;
           letter-spacing: 1.2px;
            >>> img{
                display: block !important;
                width:100% !important
            }
        }
    }
}
</style>
